<template>
  <div class="register-container">
    <div class="register-card">
      <h2>乒乓球教练注册</h2>

      <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="120px"
          class="register-form"
          status-icon
      >
        <!-- 1. 基础账号信息 -->
        <el-form-item label="用户名" prop="username" required>
          <el-input
              v-model="form.username"
              placeholder="4-16位字母、数字或下划线"
              clearable
              maxlength="16"
              show-word-limit
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password" required>
          <el-input
              v-model="form.password"
              type="password"
              placeholder="8-16位（字母+数字+特殊字符）"
              show-password
              maxlength="16"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="confirmPassword" required>
          <el-input
              v-model="form.confirmPassword"
              type="password"
              placeholder="再次输入密码"
              show-password
              maxlength="16"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 2. 个人信息 -->
        <el-divider border-style="dashed" />
        <h3 class="section-title">个人信息</h3>

        <el-form-item label="真实姓名" prop="realName" required>
          <el-input
              v-model="form.realName"
              placeholder="与身份证一致"
              maxlength="10"
              show-word-limit
          >
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone" required>
          <el-input
              v-model="form.phone"
              placeholder="11位中国大陆手机号"
              maxlength="11"
          >
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" required>
          <el-input
              v-model="form.email"
              placeholder="请输入有效邮箱地址"
              maxlength="50"
              show-word-limit
          >
            <template #prefix>
              <el-icon><Message /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio-button label="male">男</el-radio-button>
            <el-radio-button label="female">女</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input-number
              v-model="form.age"
              :min="18"
              :max="65"
              controls-position="right"
          />
        </el-form-item>

        <!-- 修复1：校区选择器（确保v-model绑定form.campus_id，标签闭合） -->
        <el-form-item label="校区" prop="campus_id" required>
          <el-select
              v-model="form.campus_id"
              placeholder="请选择主要授课校区"
              style="width: 100%"
              filterable
              :loading="campusLoading"
          >
            <!-- 关键：el-option必须闭合，value绑定campus.id（数字类型） -->
            <el-option
                v-for="campus in campuses"
                :key="campus.id"
                :label="campus.name"
                :value="campus.id"
            >
              <span style="float: left">{{ campus.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{ campus.address || '暂无地址' }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 3. 教练资质 -->
        <el-divider border-style="dashed" />
        <h3 class="section-title">教练资质</h3>

        <el-form-item label="教龄" prop="teachingYears">
          <el-input-number
              v-model="form.teachingYears"
              :min="0"
              :max="50"
              controls-position="right"
          />
          <span class="unit">年</span>
        </el-form-item>

        <!-- 4. 证件照上传（修复2：上传逻辑对接） -->
        <el-form-item label="证件照" prop="photo" required>
          <el-upload
              :auto-upload="false"
          @change="handleFileChange"
          :limit="1"
          :on-success="handleUploadSuccess"
          :before-upload="beforeUpload"
          :on-error="handleUploadError"
          :on-remove="handleRemove"
          :on-exceed="handleExceed"
          list-type="picture-card"
          :file-list="fileList"
          :class="{ 'upload-disabled': uploadLoading }"
          :headers="uploadHeaders"
          accept=".jpg,.jpeg,.png"

          >
          <el-icon v-if="!uploadLoading"><Plus /></el-icon>
          <el-icon v-else class="is-loading"><Loading /></el-icon>

          <template #file="{ file }">
            <div class="preview-wrapper">
              <img :src="file.url" class="preview-image" />
              <span class="preview-actions">
                  <el-icon @click.stop="handlePreview(file)"><View /></el-icon>
                  <el-icon @click.stop="handleRemove(file)"><Delete /></el-icon>
                </span>
            </div>
          </template>

          <template #tip>
            <div class="upload-tip">
              <el-text type="info">
                请上传正面免冠证件照（白底/蓝底）<br>
                支持JPG/PNG格式，不超过2MB
              </el-text>
            </div>
          </template>
          </el-upload>

          <el-dialog v-model="previewVisible" width="60%">
            <img :src="previewImageUrl" style="width: 100%" />
          </el-dialog>
        </el-form-item>

        <!-- 5. 教学经历 -->
        <el-form-item label="教学经历" prop="teachingExperience" required>
          <el-input
              v-model="form.teachingExperience"
              type="textarea"
              :rows="5"
              placeholder="请详细描述：
            - 教学专长领域
            - 曾获荣誉奖项
            - 典型学员案例"
              maxlength="1000"
              show-word-limit
              resize="none"
          />
        </el-form-item>

        <!-- 表单操作按钮 -->
        <el-form-item>
          <el-button
              type="primary"
              @click="submitForm"
              :loading="loading"
              size="large"
          >
            <el-icon><Upload /></el-icon>
            提交审核
          </el-button>

          <el-button
              @click="resetForm"
              size="large"
          >
            <el-icon><Refresh /></el-icon>
            重置表单
          </el-button>

          <el-button
              @click="goBack"
              size="large"
          >
            <el-icon><Back /></el-icon>
            返回
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  ElMessage,
  ElMessageBox
} from 'element-plus'
import {
  User,
  Lock,
  UserFilled,
  Iphone,
  Message,
  Plus,
  Loading,
  View,
  Delete,
  Upload,
  Refresh,
  Back
} from '@element-plus/icons-vue'
import authApi from '@/api/auth'
import request from '@/utils/request'
import { getCampusList } from '@/api/campus'

const router = useRouter()
const isDev = false // 开发模式开关（生产环境改为false）

// 1. 表单数据模型（适配后端字段，campus_id为数字类型）
const form = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  realName: '',
  phone: '',
  email: '',
  gender: 'male', // 默认男
  age: 25, // 默认年龄
  campus_id: undefined, // 校区ID（与学生注册一致，初始化为undefined避免null类型）
  teachingYears: 3, // 教龄默认值
  photo: '', // 存储后端返回的完整图片URL（适配UploadController返回格式）
  teachingExperience: '' // 教学经历描述
})

// 2. 校区相关状态（与学生注册共用接口逻辑）
const campuses = ref([]) // 存储校区列表：[{id, name, address}, ...]
const campusLoading = ref(true) // 校区下拉框加载状态

// 3. 上传相关状态（证件照上传核心状态）
const fileList = ref([]) // 已选择文件列表
const uploadLoading = ref(false) // 上传按钮加载状态
const previewVisible = ref(false) // 图片预览弹窗显示状态
const previewImageUrl = ref('') // 预览图片URL
const UPLOAD_PHOTO_URL = '/upload/coach-photo' // 核心：匹配后端UploadController接口路径（无/api前缀）

// 4. 表单核心状态
const formRef = ref() // 表单实例引用（用于校验、重置）
const loading = ref(false) // 提交按钮加载状态

// 5. 上传请求头（适配后端权限校验，仅在有token时传递）
const uploadHeaders = computed(() => {
  const headers = {
    'Content-Type': 'multipart/form-data' // 文件上传必需格式，不可省略
  }
  // 仅当token存在时传递Authorization（避免空token干扰后端校验）
  const token = localStorage.getItem('ptms-token')
  if (token) {
    headers.Authorization = `Bearer ${token}`
  }
  return headers
})

// 6. 表单验证规则（强化campus_id和照片校验，适配后端要求）
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
    { min: 4, max: 16, message: '用户名长度需在4-16位之间', trigger: ['blur', 'change'] },
    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名仅支持字母、数字和下划线', trigger: ['blur', 'change'] }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
    { min: 8, max: 16, message: '密码长度需在8-16位之间', trigger: ['blur', 'change'] },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/,
      message: '密码需包含字母、数字和特殊字符（@$!%*#?&）',
      trigger: ['blur', 'change']
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: ['blur', 'change'] },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: ['blur', 'change']
    }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: ['blur', 'change'] },
    { min: 2, max: 10, message: '真实姓名长度需在2-10位之间', trigger: ['blur', 'change'] },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文真实姓名', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的11位手机号', trigger: ['blur', 'change'] }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入有效的邮箱格式（如：xxx@xxx.com）',
      trigger: ['blur', 'change']
    },
    { max: 50, message: '邮箱长度不能超过50个字符', trigger: ['blur', 'change'] }
  ],
  campus_id: [
    { required: true, message: '请选择校区', trigger: ['blur', 'change'] },
    {
      validator: (rule, value, callback) => {
        if (value === undefined || value === null || typeof value !== 'number') {
          callback(new Error('请选择有效的校区（可刷新页面重试）'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  teachingYears: [
    { required: true, message: '请输入教龄', trigger: ['blur', 'change'] },
    { type: 'number', min: 0, max: 50, message: '教龄需在0-50年之间', trigger: ['blur', 'change'] }
  ],
  photo: [
    { required: true, message: '请上传证件照', trigger: ['blur', 'change'] },
    {
      validator: (rule, value, callback) => {
        if (value && !/^http(s)?:\/\/.+/.test(value)) {
          callback(new Error('证件照URL格式异常，请重新上传'))
        } else {
          callback()
        }
      },
      trigger: 'change'
    }
  ],
  teachingExperience: [
    { required: true, message: '请输入教学经历', trigger: ['blur', 'change'] },
    { min: 200, message: '教学经历描述需至少200字', trigger: ['blur', 'change'] }
  ]
}

// 7. 页面加载时获取校区列表（与学生注册逻辑一致）
onMounted(async () => {
  try {
    campusLoading.value = true
    const response = await getCampusList()
    if (response?.code === 200 && Array.isArray(response.data)) {
      campuses.value = response.data
      // 自动选中第一个校区（优化用户体验，确保campus_id为数字类型）
      if (campuses.value.length > 0) {
        form.campus_id = campuses.value[0].id
        console.log('自动选中的校区ID（数字类型）：', form.campus_id, '类型：', typeof form.campus_id)
      } else {
        ElMessage.warning('暂无校区数据，请联系管理员添加后再注册')
      }
    } else {
      ElMessage.error(`获取校区失败：${response?.message || '接口返回格式异常'}`)
    }
  } catch (error) {
    ElMessage.error('网络错误：无法连接校区接口，请检查后端服务')
    console.error('校区列表加载异常详情：', error)
  } finally {
    campusLoading.value = false
  }
})

// 8. 证件照上传核心逻辑（适配后端UploadController接口）
// 8.1 上传前校验（格式、大小）
const beforeUpload = (file) => {
  const validTypes = ['image/jpeg', 'image/png'] // 后端支持的图片类型
  const validExts = ['.jpg', '.jpeg', '.png']
  const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
  const fileSize = file.size / 1024 / 1024 // 转换为MB

  // 空文件校验
  if (!file || fileSize === 0) {
    ElMessage.error('请选择有效的图片文件（文件为空）')
    return false
  }
  // 格式校验
  if (!validTypes.includes(file.type) && !validExts.includes(fileExt)) {
    ElMessage.error(`仅支持JPG/PNG格式（当前格式：${fileExt}）`)
    return false
  }
  // 大小校验（限制2MB，可根据后端调整）
  if (fileSize >= 2) {
    ElMessage.error(`图片大小超过2MB（当前：${fileSize.toFixed(2)}MB）`)
    return false
  }

  uploadLoading.value = true
  return true
}

// 8.2 上传成功处理（接收后端返回的完整URL）
const handleUploadSuccess = (response, uploadFile) => {
  uploadLoading.value = false
  // 匹配后端ResultVO格式（code=200为成功，data为图片URL）
  if (response?.code === 200 && response.data) {
    form.photo = response.data // 存储后端返回的完整图片URL
    // 更新文件列表用于预览（使用后端URL确保预览正常）
    fileList.value = [{
      name: uploadFile.name,
      url: response.data,
      uid: uploadFile.uid
    }]
    ElMessage.success('证件照上传成功')
  } else {
    ElMessage.error(`上传失败：${response?.message || '未获取到有效图片地址'}`)
    handleRemove() // 清空无效记录
  }
}

// 8.3 上传失败处理（精准错误提示）
const handleUploadError = (err) => {
  uploadLoading.value = false
  let errMsg = '证件照上传失败，请稍后重试'
  // 根据后端响应状态码区分错误类型
  if (err.response?.status === 400) {
    errMsg = `参数错误：${err.response.data?.message || '后端未接收到文件'}`
  } else if (err.response?.status === 404) {
    errMsg = '上传接口地址错误（请确认URL是否为 /upload/coach-photo）'
  } else if (err.response?.status === 403) {
    errMsg = '无上传权限，请登录后重试'
  } else if (err.response?.status === 500) {
    errMsg = `服务器错误：${err.response.data?.message || '文件保存失败'}`
  }
  ElMessage.error(errMsg)
  console.error('上传错误详情：', {
    url: UPLOAD_PHOTO_URL,
    status: err.response?.status,
    data: err.response?.data,
    error: err
  })
  handleRemove() // 清空文件列表
}

// 8.4 移除已上传图片
const handleRemove = (file) => {
  form.photo = '' // 清空图片URL
  // 若有指定文件，则过滤该文件；否则清空整个列表
  if (file) {
    fileList.value = fileList.value.filter(item => item.uid !== file.uid)
  } else {
    fileList.value = []
  }
}

// 8.5 超过上传数量限制
const handleExceed = () => {
  ElMessage.warning('仅支持上传1张证件照，请先移除已选图片')
}

// 8.6 预览已上传图片
const handlePreview = (file) => {
  previewImageUrl.value = file.url // 使用后端返回的URL预览
  previewVisible.value = true
}

// 8.7 手动触发上传（适配auto-upload=false，参数名改为file匹配后端）
const handleManualUpload = async (uploadFile) => {
  try {
    const isValid = beforeUpload(uploadFile)
    if (!isValid) return

    // 核心：FormData参数名改为"file"（匹配后端@RequestParam("file")）
    const formData = new FormData()
    formData.append('file', uploadFile.raw) // 参数名必须为file

    // 调试日志：确认请求参数和URL
    console.log('上传请求URL：', UPLOAD_PHOTO_URL)
    console.log('FormData参数：')
    for (const [key, value] of formData.entries()) {
      console.log(`  ${key}:`, value) // 应显示 file: File 对象
    }

    // 发送上传请求（禁止Axios处理FormData，避免格式破坏）
    const response = await request({
      url: UPLOAD_PHOTO_URL,
      method: 'POST',
      data: formData,
      headers: uploadHeaders.value,
      timeout: 30000, // 延长超时时间，避免大文件上传超时
      transformRequest: [data => data] // 关键：保持FormData原始格式
    })

    handleUploadSuccess(response, uploadFile)
  } catch (err) {
    handleUploadError(err)
  }
}

// 8.8 文件选择变化时触发上传
const handleFileChange = (uploadFile, uploadFiles) => {
  // 仅处理"准备上传"状态的文件，且限制1张
  if (uploadFile.status === 'ready' && uploadFiles.length <= 1) {
    handleManualUpload(uploadFile)
  }
}

// 9. 表单核心操作逻辑
// 9.1 提交注册（传递完整参数给后端）
const submitForm = async () => {
  try {
    // 先执行前端表单校验
    await formRef.value.validate()
    loading.value = true

    // 构造提交数据（与后端接口字段匹配）
    const submitData = {
      username: form.username,
      password: form.password,
      realName: form.realName,
      phone: form.phone,
      email: form.email,
      gender: form.gender,
      age: form.age,
      campus_id: form.campus_id, // 校区ID（数字类型）
      teachingYears: form.teachingYears,
      photo: form.photo, // 后端返回的完整图片URL
      teachingExperience: form.teachingExperience,
      userType: 'coach' // 固定标识为教练类型
    }

    // 调试日志：确认提交参数
    console.log('最终提交给后端的参数：', submitData)
    console.log('campus_id类型：', typeof submitData.campus_id)
    console.log('图片URL：', submitData.photo)

    // 调用教练注册接口
    const res = await authApi.registerCoach(submitData)
    if (res.code === 200) {
      ElMessage({
        message: res.message || '注册信息已提交审核，审核通过后可登录',
        type: 'success',
        duration: 2000,
        onClose: () => {
          router.push('/') // 跳转登录页
        }
      })
    } else {
      ElMessage.error(res.message || '注册失败，请检查信息后重试')
    }
  } catch (err) {
    // 区分校验失败和接口异常
    if (err.name === 'Error' && err.message.includes('Validation failed')) {
      ElMessage.warning('请完善表单信息，确保所有必填项符合要求')
    } else if (err.response) {
      const errMsg = err.response.data?.message || '服务器异常，请稍后重试'
      ElMessage.error(`提交失败：${errMsg}`)
      console.error('接口错误详情：', err.response.data)
    } else {
      ElMessage.error('提交失败，未知错误或网络异常')
      console.error('未知错误详情：', err)
    }
  } finally {
    loading.value = false
  }
}

// 9.2 重置表单
const resetForm = () => {
  ElMessageBox.confirm(
      '确定要重置所有填写内容吗？重置后数据将不可恢复',
      '重置确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    formRef.value.resetFields() // 重置表单字段
    handleRemove() // 清空证件照
    // 重置校区选择（恢复第一个校区）
    if (campuses.value.length > 0) {
      form.campus_id = campuses.value[0].id
    }
    ElMessage.success('表单已重置')
  }).catch(() => {
    // 取消重置，不操作
  })
}

// 9.3 返回上一页（跳转注册选择页）
const goBack = () => {
  router.push('/register')
}
</script>


<style scoped>
/* 页面整体布局：适配全屏居中，背景色统一风格 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
}

/* 注册卡片：控制宽度、阴影和内边距，确保视觉感 */
.register-card {
  width: 100%;
  max-width: 900px;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

/* 标题样式：区分主标题和分区标题，统一颜色和间距 */
h2 {
  text-align: center;
  color: #333333;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
}

.section-title {
  color: #409eff;
  margin: 20px 0 15px;
  font-size: 18px;
  font-weight: 500;
}

/* 表单基础样式：控制表单项间距，避免拥挤 */
.register-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 22px;
  box-sizing: border-box;
}

/* 最后一个表单项（按钮组）：增加顶部间距，区分功能区域 */
.el-form-item:last-child {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* 单位文本（如“年”）：与输入框垂直对齐，统一颜色大小 */
.unit {
  margin-left: 10px;
  color: #666666;
  font-size: 14px;
  vertical-align: middle;
}

/* 校区选择器样式：统一下拉框和选项的视觉效果 */
/* 加载状态：确保加载动画居中 */
:deep(.el-select__loading) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 36px;
}

/* 下拉选项：左右布局（名称+地址），地址灰色小字 */
:deep(.el-select-dropdown__item) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  line-height: 24px;
}

:deep(.el-select-dropdown__item span:last-child) {
  color: #8492a6;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px; /* 限制地址宽度，避免选项过长 */
}

/* 过滤输入框：统一字体大小和颜色 */
:deep(.el-select__input) {
  font-size: 14px;
  color: #333;
}

/* 证件照上传组件样式：确保上传卡片、预览图和提示文本的一致性 */
/* 上传卡片：控制大小、边框和hover效果 */
:deep(.el-upload-list--picture-card) {
  margin: 0;
  display: inline-block;
}

:deep(.el-upload--picture-card) {
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-upload--picture-card:hover) {
  border-color: #409eff;
  background-color: #f0f7ff;
}

/* 上传禁用状态（加载中）：降低透明度，禁止鼠标交互 */
.upload-disabled :deep(.el-upload) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 上传提示文本：控制间距和颜色，引导用户操作 */
.upload-tip {
  margin-top: 10px;
  line-height: 1.5;
  font-size: 13px;
  color: #666;
}

/* 图片预览容器：确保预览图比例正常，操作按钮悬浮显示 */
.preview-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

/* 预览图操作按钮（查看/删除）：悬浮在图片右下角，半透明背景 */
.preview-actions {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  padding: 4px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px 0 0 0;
}

.preview-actions .el-icon {
  color: #ffffff;
  margin: 0 4px;
  cursor: pointer;
  font-size: 16px;
}

.preview-actions .el-icon:hover {
  color: #409eff; /* hover时变主题色，提升交互感 */
}

/* 图片预览弹窗：确保弹窗内图片自适应，避免溢出 */
:deep(.el-dialog__body) {
  padding: 16px;
  text-align: center;
}

/* 响应式适配：适配移动端和小屏设备，保证操作流畅 */
@media (max-width: 768px) {
  .register-card {
    padding: 20px 16px; /* 减小移动端内边距 */
  }

  h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 16px;
    margin: 16px 0 12px;
  }

  /* 表单标签：移动端左对齐，避免换行 */
  :deep(.el-form-item__label) {
    text-align: left;
    margin-bottom: 8px;
    font-size: 14px;
  }

  /* 校区选择器：移动端全屏宽度，确保操作区域足够 */
  :deep(.el-select) {
    width: 100% !important;
  }

  /* 上传卡片：移动端缩小尺寸，适配屏幕 */
  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 120px;
  }

  /* 按钮组：移动端垂直排列，避免横向溢出 */
  .el-form-item:last-child {
    flex-direction: column;
    gap: 12px;
  }

  .el-form-item:last-child .el-button {
    width: 100%; /* 按钮全屏宽度，方便点击 */
  }
}

/* 小屏设备（如手机横屏）额外适配：进一步优化显示 */
@media (max-width: 480px) {
  .register-container {
    padding: 10px; /* 进一步减小小屏设备内边距 */
  }

  /* 校区选项地址：进一步限制宽度，避免换行 */
  :deep(.el-select-dropdown__item span:last-child) {
    max-width: 120px;
  }
}
</style>